<template>
  <view>
    <!-- 自定义顶部导航栏 -->
    <view class="custom-navbar">
      <view class="dis">
        <view class="navbar-left" @click="goBack">
          <image
            class="nav-icon"
            src="/static/activity/fanhui btn@2x.png"
          ></image>
        </view>
        <view class="navbar-title">热榜活动 | 上海摇爪公园宠物春游计划</view>
      </view>
      <view class="navbar-right">
        <image
          class="nav-icon"
          src="/static/activity/share.png"
          @click="handleShare"
        ></image>
      </view>
    </view>
    <view class="mainBox">
      <!-- 顶部活动图片介绍 -->
      <view class="activityImgBox">
        <view class="leftImgBox">
          <image
            :src="
              pagesData.imgList && pagesData.imgList.length > 0
                ? pagesData.imgList[0]
                : ''
            "
            mode="aspectFit"
          ></image>
        </view>
        <view class="rightTextBox">
          <view class="title">{{ pagesData.title }}</view>
          <view class="text1"> 时间：{{ pagesData.activityTime }} </view>
          <view class="text1"> 地点：{{ pagesData.activityLocation }} </view>
          <view class="text2">
            <text
              class="keyWordListItem"
              v-for="(item, index) in keyWordList"
              :key="index"
              >{{ item }}</text
            >
          </view>
        </view>
      </view>
      <!-- 活动文字介绍   -->
      <view class="activityTextBox">
        <view class="disspb">
          <view class="">
            <text class="priceText">￥{{ pagesData.paymentAmount }}</text>
            <text class="priceText1">/人</text>
          </view>
          <view class="timeText"> {{ pagesData.activityTime }} </view>
        </view>
        <view class="lineBox"></view>
        <view class="disspb">
          <view class="">
            <view class="text1">{{ pagesData.activityLocation }}</view>
            <view class="text2">{{ pagesData.activityLocation }}</view>
          </view>
          <view class="daohangImg" @click="handleMap(pagesData)">
            <image
              src="/static/hotspot/daohang@2x.png"
              mode="aspectFit"
            ></image>
          </view>
        </view>
        <view class="lineBox"></view>
        <view class="dis">
          <view class="conditionItem">
            <image
              v-if="pagesData.activityCondition1 == 1"
              src="/static/hotspot/cuohao@2x.png"
              mode="aspectFit"
            ></image>
            <image
              v-if="pagesData.activityCondition1 == 0"
              src="/static/hotspot/duihao@2x.png"
              mode="aspectFit"
            ></image>
            不支持退款
          </view>
          <view class="conditionItem">
            <image
              v-if="pagesData.activityCondition2 == 1"
              src="/static/hotspot/cuohao@2x.png"
              mode="aspectFit"
            ></image>
            <image
              v-if="pagesData.activityCondition2 == 0"
              src="/static/hotspot/duihao@2x.png"
              mode="aspectFit"
            ></image>
            实名参加
          </view>
        </view>
      </view>
      <!-- 活动详情 -->
      <view class="activityDetailBox">
        <view class="title"> 【活动详情】 </view>
        <rich-text
          class="content"
          :nodes="pagesData.activityDetails"
        ></rich-text>
        <view class="title"> 【活动须知】 </view>
        <rich-text
          class="content"
          :nodes="pagesData.activityNotice || pagesData.activityDetails"
        ></rich-text>
      </view>
    </view>
    <!-- 报名-->
    <view class="signUpBox">
      <view class="signBtn" @click="confirmOrder"> 立即报名 </view>
    </view>
  </view>
</template>

<script>
import commonMixin from "@/mixin/commonMinxin";

export default {
  mixins: [commonMixin],
  data() {
    return {
      keyWordList: [],
      pagesData: {},
    };
  },
  onLoad(options) {
    this.id = options.id;
    this.getData();
  },
  methods: {
    // 导航
    handleMap(data) {
      let location = {
        longitude: data.activityLocationLongitude,
        latitude: data.activityLocationLatitude,
      };
      console.log(location);
      switch (uni.getSystemInfoSync().platform) {
        case "android":
          let d = JSON.stringify(location);
          window.AndroidBridge.openMapToNavigate(d);
          console.log("运行Android上");
          break;
        case "ios":
          window.webkit.messageHandlers.openMapToNavigate.postMessage(location);
          break;
        default:
          console.log("运行在开发者工具上");
          break;
      }
    },
    getData() {
      uni.app.post(
        "/activity/message/details",
        {
          id: this.id,
          userId: uni.getStorageSync("userId"),
        },
        "json",
        "",
        (res) => {
          // 初始化默认数据，避免undefined错误
          this.pagesData = {
            imgList: [],
            id: this.id, // 确保id字段存在
            ...res.data,
          };

          console.log("获取到的活动数据:", this.pagesData);

          // 确保富文本内容可以正确解析
          if (
            this.pagesData.activityDetails &&
            typeof this.pagesData.activityDetails === "string"
          ) {
            // 如果内容是字符串而不是HTML节点数组，确保它是有效的HTML
            this.pagesData.activityDetails = this.pagesData.activityDetails;
          }
          if (
            this.pagesData.activityNotice &&
            typeof this.pagesData.activityNotice === "string"
          ) {
            this.pagesData.activityNotice = this.pagesData.activityNotice;
          }

          // 确保imgList是数组
          if (!Array.isArray(this.pagesData.imgList)) {
            this.pagesData.imgList = [];
          }
        },
      );
    },
    confirmOrder() {
      // window.webkit.messageHandlers.pushNewWebVC.postMessage({
      //   hideNavBar: '0',
      //   hideTotalNavBar: '0',
      //   hideBottomSafeBar: '0',
      //   navtitle: '确认信息',
      //   url: `http://192.168.101.147:8080/#/pages/hotspot/hotspotOrder?id=${this.id}`
      // });
      uni.navigateTo({
        url: `/pages/hotspot/hotspotOrder?id=${this.id}`,
      });
    },
    goBack() {
      switch (uni.getSystemInfoSync().platform) {
        case "android":
          // let ddd = {
          // 	hideNavBar: '1',
          // 	hideTotalNavBar: '0',
          // 	hideBottomSafeBar: '0',
          // 	url: `https://www.yaozhuasocial.com/yaozhua_shequ/#/pages/community/communityList?categoryId=${group.id}&moduleId=${product.id}`
          // }
          // let d = JSON.stringify(ddd)
          // console.log(d, '都是对的')
          window.AndroidBridge.backEvent();
          console.log("运行Android上");
          break;
        case "ios":
          window.webkit.messageHandlers.backEvent.postMessage({});
          break;
        default:
          console.log("运行在开发者工具上");
          break;
      }
    },
    handleShare() {
      console.log("分享", this.pagesData);

      // 检查数据是否已加载
      if (!this.pagesData || !this.pagesData.id) {
        console.log("数据未加载完成，无法分享");
        uni.showToast({
          title: "数据加载中，请稍后再试",
          icon: "none",
        });
        return;
      }

      switch (uni.getSystemInfoSync().platform) {
        case "android":
          let ddd = {
            id: this.pagesData.id,
            title: this.pagesData.title,
            imgUrl: this.pagesData.imgList[0],
            type: "3", //活动
            detail: this.pagesData.activityDetails,
            url: `https://www.yaozhuasocial.com/yaozhua_shequ/#/pages/hotspot/hotspotDown?id=${this.pagesData.id}`,
          };
          let d = JSON.stringify(ddd);
          console.log(d, "都是对的");
          window.AndroidBridge.shareEvent(d);
          console.log("运行Android上");
          break;
        case "ios":
          window.webkit.messageHandlers.shareEvent.postMessage({
            id: this.pagesData.id,
            title: this.pagesData.title,
            imgUrl: this.pagesData.imgList[0],
            type: "3", //活动
            detail: this.pagesData.activityDetails,
            url: `https://www.yaozhuasocial.com/yaozhua_shequ/#/pages/hotspot/hotspotDown?id=${this.pagesData.id}`,
          });
          console.log("ios");
          break;
        default:
          console.log("运行在开发者工具上");
          uni.showToast({
            title: "开发环境暂不支持分享",
            icon: "none",
          });
          break;
      }

      // 分享活动
      // uni.share({
      // 	provider: "weixin",
      // 	scene: "WXSceneSession",
      // 	type: 0,
      // 	title: this.pagesData.title || '热榜活动',
      // 	summary: this.pagesData.activityDetails ? this.pagesData.activityDetails.replace(/<[^>]+>/g,
      // 		'').substring(0, 100) : '活动详情',
      // 	imageUrl: this.pagesData.imgList && this.pagesData.imgList.length > 0 ? this.pagesData.imgList[
      // 		0] : '',
      // 	href: `${window.location.origin}/#/pages/hotspot/hotspot?id=${this.id}`,
      // 	success: function(res) {
      // 		console.log("分享成功：", res);
      // 	},
      // 	fail: function(err) {
      // 		console.log("分享失败：", err);
      // 	}
      // });
    },
  },
};
</script>

<style lang="scss" scoped>
page {
  background-color: #f8f8f8;
}

/* 自定义导航栏样式 */
.custom-navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 120rpx;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 26rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  z-index: 1000;

  .navbar-left,
  .navbar-right {
    display: flex;
    align-items: center;
  }

  .nav-icon {
    width: 48rpx;
    height: 48rpx;
  }

  .navbar-title {
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    font-weight: bold;
    font-size: 28rpx;
    color: #303030;
  }

  .status-text {
    width: 180rpx;
    height: 48rpx;
    background: #f6f6f6;
    border-radius: 24rpx 24rpx 24rpx 24rpx;
    font-weight: bold;
    font-size: 28rpx;
    color: #303030;
    margin-right: 16rpx;
    text-align: center;
    line-height: 48rpx;
  }
}

// 多次使用样式
.disspb {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dis {
  display: flex;
  align-items: center;
}

.mainBox {
  // height: calc(100vh - 232rpx);
  // overflow-y: auto;
  padding-top: 120rpx;
  padding-bottom: 160rpx;
  // background-color: red;
}

.activityImgBox {
  display: flex;
  padding: 72rpx 48rpx;
  background-position: center bottom;
  background-repeat: no-repeat;
  background-image:
    url("/static/hotspot/bg2.png"),
    linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7));
  /* 背景图像和叠加层 */
  background-blend-mode: overlay;
  /* 使用叠加模式 */
  background-size: cover;
  /* 背景图像尺寸 */

  .leftImgBox {
    margin-right: 32rpx;

    image {
      width: 284rpx;
      height: 328rpx;
      border-radius: 16rpx 16rpx 16rpx 16rpx;
      background-color: #ffffff;
    }
  }

  .rightTextBox {
    flex: 1;

    .title {
      font-weight: bold;
      font-size: 32rpx;
      color: #ffffff;
      margin-bottom: 16rpx;
    }

    .text1 {
      font-weight: 400;
      font-size: 20rpx;
      color: #ffffff;
    }

    .text2 {
      font-weight: 400;
      font-size: 20rpx;
      color: #ffffff;
      margin-top: 48rpx;

      .keyWordListItem {
        margin-right: 32rpx;
      }
    }
  }
}

.activityTextBox {
  margin: 32rpx 28rpx;
  background-image: url("/static/hotspot/bg3.png");
  padding: 16rpx 32rpx 20rpx;

  .lineBox {
    width: 100%;
    height: 0rpx;
    border: 2rpx solid #f8f8f8;
    margin: 16rpx 0;
  }

  .priceText {
    font-weight: bold;
    font-size: 32rpx;
    color: #303030;
  }

  .priceText1 {
    font-weight: bold;
    font-size: 20rpx;
    color: #303030;
    margin-right: 8rpx;
  }

  .timeText {
    font-weight: bold;
    font-size: 26rpx;
    color: #303030;
  }

  .text1 {
    font-weight: bold;
    font-size: 26rpx;
    color: #303030;
  }

  .text2 {
    font-weight: 400;
    font-size: 20rpx;
    color: #7f7f7f;
  }

  .daohangImg image {
    width: 64rpx;
    height: 65rpx;
  }

  .conditionItem {
    display: flex;
    align-items: center;
    font-weight: 400;
    font-size: 26rpx;
    color: #303030;
    margin-right: 32rpx;

    image {
      width: 32rpx;
      height: 32rpx;
    }
  }
}

.activityDetailBox {
  margin-top: 64rpx;
  padding: 0 28rpx;

  .title {
    font-weight: bold;
    font-size: 32rpx;
    color: #303030;
    margin-bottom: 16rpx;
    // margin-left: 12rpx;
  }

  .content {
    font-weight: 400;
    font-size: 28rpx;
    color: #303030;
    margin-bottom: 48rpx;
  }
}

.signUpBox {
  width: 100%;
  background: #ffffff;
  padding: 16rpx 28rpx;
  position: fixed;
  /* 固定定位 */
  bottom: 0;
  /* 距离底部0 */
  left: 0;
  /* 距离左边0 */

  .signBtn {
    width: calc(100vw - 56rpx);
    height: 56rpx;
    background: #d9f700;
    border-radius: 56rpx;
    font-weight: bold;
    font-size: 28rpx;
    color: #303030;
    line-height: 56rpx;
    text-align: center;
  }
}
</style>
